<template>
  <div class="header_box">
    <img class="header_bg" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210520/1621489387247.png" alt="">
    <div class="header_left_box">
      <img class="header_left" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210520/1621490463346.png" alt="">
    </div>
    <div class="header_right_box">
      <img class="header_right" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210520/1621490463346.png" alt="">
    </div>
    <div class="header_tit">{{ text }}</div>
  </div>
</template>

<script>
export default {
  props:{
    text:{
      type:String,
      default:'浙江文化基因库|综合看板'
    }
  }
}
</script>

<style>
.header_box{
  width: 100%;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.header_bg{
  width: 100%;
  min-width: 1300px;
  height: 60px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.header_tit{
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  color: #fff;
  font-weight: bolder;
  font-size: 24px;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#d7d7d7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header_left_box{
  position: absolute;
  bottom: 10%;
  left: calc(50% - 300px);
  animation: tit 3s ease-out infinite;
  overflow: hidden;
}
.header_right_box{
  position: absolute;
  bottom: 10%;
  right: calc(50% - 300px);;
  transform: rotateY(180deg);
  animation: tit 3s ease-out infinite;
  overflow: hidden;
}
@keyframes tit {
  0%{width: 0px;}
  50%{width: 95px;}
  100%{width: 0px;}
}
</style>
